* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    /* 主题色 */
    --themeColor1: #F38181;
    --themeColor2: #FCE38A;
    --themeColor3: #EAFFD0;
    --themeColor4: #95E1D3;

    --warring:#FCE38A;
    --success:#24985e;


    /* --themeColor1:rgb(184, 67, 67); */
}

li {
    list-style: none
}

img {
    vertical-align: top;
    border: none
}

a {
    text-decoration: none;
    color: #333;
}

::-webkit-scrollbar {
    width: 5px;
    /*对垂直流动条有效*/
    height: 2px;
    /*对水平流动条有效*/
}


/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
    /* background-color: #E8E8E8; */
    border-radius: 3px;
}


/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: var(--themeColor2);
}


/* 全局css */
.flex-box-default {
    display: flex;
}


/* 艺术品item */
.item-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 40px;
}

@media screen and (max-width: 1000px) {
    .item-box {
        padding: 0 10px;
    }
}

.item-box .art-item {
    margin: 1.5%;
}

@media screen and (max-width: 2800px) {
    .art-item {
        width: 17%;
    }
}

@media screen and (max-width: 1800px) {
    .art-item {
        width: 22%;
    }
}

@media screen and (max-width: 1400px) {
    .art-item {
        width: 30%;
    }
}

@media screen and (max-width: 1000px) {
    .art-item {
        width: 47%;
    }
}

@media screen and (max-width: 600px) {
    .art-item {
        width: 100%;
    }
}

/* 合集样式 */
@media screen and (max-width: 100000px) {
    .col-item {
        width: 16%;
    }
}

@media screen and (max-width: 2500px) {
    .col-item {
        width: 21%;
    }
}

@media screen and (max-width: 1700px) {
    .col-item {
        width: 29%;
    }
}

@media screen and (max-width: 1300px) {
    .col-item {
        width: 46%;
    }
}

@media screen and (max-width: 800px) {
    .col-item {
        width: 100%;
    }
}


.col-box {
    margin: 0 60px;
    padding: 0 30px;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 1000px) {
    .col-box {
        margin: 0 !important;
        padding: 0 10px;
    }
}


.col-item {
    margin: 2% 2%;
}

/* element message */
.el-message-custom{
    z-index: 3000 !important;
}